<template>
  <div class="dialog-button">
    <el-button
      :icon="icon"
      type="text"
      @click="showDialog = true"
    >
      {{ buttonText }}
    </el-button>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
    >
      <slot />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogButton',
  props: {
    code: {
      type: [String, Object, Array],
      default: null
    },
    icon: {
      type: String,
      default: 'em-icon-script'
    },
    buttonText: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: 'CodeMirror'
    }
  },
  data() {
    return {
      showDialog: false,
      saving: false,
      activeIndex: undefined
    }
  },
  computed: {
    codeHtml() {
      return this.code
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss">
</style>
